<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
<template>
	<view class="content">
		<uni-search-bar placeholder="请输入关键字搜索" radius="100" cancel-button="none" v-model="kw" class="uni-search"
			@confirm="confirm" @clear="clear" />
		<view v-if="blogs.length==0" class="none">
			<image src="/static/icons/nodata.png" mode="widthFix" class="logo"></image>
			<text>{{TextNoDate}}</text>
		</view>
		<view v-else v-for="(item,index) in blogs" :key="item.id" class="item-container">

			<text class="item-title">{{item.title}}</text>
			<rich-text :nodes="item.description" class="item-desc"></rich-text>
			<image :src="item.picture" mode="widthFix" class="item-focus"></image>
			<image :src="item.user.avatar" mode="aspectFill" class="item-avatar"></image>
			<view>
				<text v-for="(tag, idx) in item.tags" :key="tag" class="item-tag">{{tag}}</text>
			</view>
			<view class="icon-container">
				<!-- <image src="/static/icons/ic_good.png" class="icon"></image> -->
				<text
					:class="goodIds.indexOf(item.id)>=0?'iconfont icon-shoucang ic-red':'iconfont icon-shoucang ic-gray'"
					@click.stop="changeGood(item.id)"> </text>

				<text class="icon-text">{{item.good}}</text>

				<image src="/static/icons/ic_comment.png" class="icon"></image>
				<text class="icon-text">{{item.comments.length}}</text>
				<image src="/static/icons/ic_count.png" class="icon"></image>
				<text class="icon-text">{{item.readCount}}</text>
			</view>
			<!-- <image src="/static/icons/ic_tag.png" class="icon-tag"></image> -->
			<!-- 字体图标的使用 iconfont 字体图标代码  字体图标样式 -->
			<text class="iconfont icon-xialacaidanjiantou icon-tag" @click.stop="drop(item.id)"></text>
		</view>
		<view class="buttom" v-if="blogs.length == count">
			-----已经到达底部-----
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				TextNoDate: "没有数据，请向下刷新!",
				blogs: [],
				page: 0,
				size: 3,
				count: -1,
				searching: false,
				kw: '',
				goodIds: [],
				id:4

			}
		},
		onLoad() {
			let ids = uni.getStorageSync(this.$params.key_good_ids)
			if (ids) {
				this.goodIds = ids
			}
			// let hello = uni.getStorageSync("hello")
			// if(hello){
			// 	console.log(hello + "：来自缓存")
			// }else{
			// 	console.log("缓存没有数据")
			// }
			//加载数据
			let blogs = uni.getStorageSync(this.$params.key_blogs)
			if (blogs) {

				// console.log(uni.getStorageSync("res"))
				this.blogs = blogs
				this.count = blogs.length

			} else {
				this.getPageBlogs()
			}

		},
		onPullDownRefresh() {
			this.searching = false
			this.kw = ''
			this.page = 0
			this.count = -1
			this.blogs = []
			this.getPageBlogs()
		},
		onReachBottom() {
			if (this.blogs.length == this.count || this.searching) {
				return
			}
			this.page++
			this.getPageBlogs()

		},
		methods: {
			drop(id) {
				uni.showActionSheet({
					itemList: ["收藏", "删除", "举报"],
					success: res => {
						switch (res.tapIndex) {
							case 0:
								uni.showToast({
									title: "功能待完善"
								})
								break
							case 1:
								uni.showModal({
									title: '警告',
									content: '确认要删除吗？',
									showCancel: true,
									cancelText: '取消',
									confirmText: '删除',
									success: res => {
										// console.log(res)
										uni.showToast({
											title: '没有删除权限，请登录！',
											icon: 'none'
										});
									},
									fail: () => {},
									complete: () => {}
								});
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			changeGood(id) {
				console.log(id)
				let good = true
				if (this.goodIds.indexOf(id) >= 0) {
					good = false
				}
				if (good) {
					this.goodIds = [...this.goodIds, id]
				} else {
					let index = this.goodIds.indexOf(id)
					if (index >= 0) {
						// this.goodIds.splice(index, 1)
						this.goodIds[index] = this.goodIds[this.goodIds.length - 1]
						this.goodIds.pop()
					}
				}
				uni.setStorageSync(this.$params.key_good_ids, this.goodIds)
				this.postGood(id, good)
			},
			postGood(id, good) {
				uni.showLoading({
					title: '点赞……',
					mask: false
				})
				let url = this.$params.host
				let action = good ? this.$params.action_good : this.$params.action_del_good
				url += action
				let data = {
					"id": id
				}
				this.$req.postQuery(url, data, res => {
					console.log(res)
					this.blogs.forEach(blog => {
						if (blog.id == id) {
							blog.good = res.data.data
						}
					})
				}, () => {
					uni.hideLoading()
				})

			},
			confirm(e) {
				// console.log(e.value)
				let kw = e.value
				if (kw.length > 0) {
					this.searching = true
					this.blogs = []
					this.count = -1
					this.page = 0
					uni.showLoading({
						title: '搜索中……',
						mask: false
					});
					this.$req.get(this.$params.host + this.$params.action_search + kw,
						res => {
							// console.log(res.data.data)
							// console.log(res.data)
							res.data.data.forEach(blog => {
								blog.picture = this.$params.host + blog.picture
								blog.user.avatar = this.$params.host + blog.user.avatar
								this.blogs = [...this.blogs, blog]
								// this.count = parseInt(res.data.message)
							})
						},
						() => {
							uni.hideLoading()

						})
				}
			},
			clear() {
				this.searching = false
				this.blogs = []
				// this.count = -1
				this.page = 0
				this.getPageBlogs()
			},

			getPageBlogs() {
				console.log("获取远程数据")
				// uni.setStorageSync("hello", "hello"+this.$formatTime(new Date()))
				let header = {
					"content-type": "application/json;charset=UTF-8",
					"page": this.page,
					"size": this.size
				}

				this.$req.getWithParams(this.$params.host + this.$params.action_blogs_page, header, res => {
					res.data.data.forEach(blog => {
						blog.picture = this.$params.host + blog.picture
						blog.user.avatar = this.$params.host + blog.user.avatar
					})
					// this.blogs = this.blogs.concat(res.data.data)
					this.blogs = [...this.blogs, ...res.data.data]
					this.count = parseInt(res.data.message)
					uni.setStorageSync(this.$params.key_blogs, this.blogs)
				}, () => {
					uni.stopPullDownRefresh()
				})
			},

			getTopBlogs() {
				this.$req.get(this.$params.host + this.$params.action_top_blogs, res => {
					res.data.data.forEach(blog => {
						blog.picture = this.$params.host + blog.picture
						blog.user.avatar = this.$params.host + blog.user.avatar
					})
					this.blogs = res.data.data
				})
			}
		}

	}
</script>
<style>
	@import url("index.css");
</style>